<template>
	<view class="message-view">
		<!-- 顶部导航栏 -->
		<u-navbar :is-back="false" title="" :background="{ 'background': '#F3F4F6' }">
			<view class="slot-wrap">
				<image src="/static/right.png" class="right" @click="back()" ></image>
				<view class="top-title">
					<text style="margin-left: 80rpx;">群聊名称</text> 
					<text style="font-weight: 400;font-size: 20rpx;color: #919191;margin-left: 80rpx;">10名群成员</text>
				</view>
			</view>
			<view slot="right">
				<view class="flexalign">
				<image src="/static/message/video.png" style="width: 46rpx;height: 36rpx;"></image>
				<image src="/static/message/more.png"  style="margin-right: 32rpx;margin-left: 40rpx;width: 43rpx;height: 10rpx;" @click="go('/pages3/set/set')" ></image>
				</view>
			</view>
		</u-navbar>
		<!-- 水印 -->
		<h-watermark :mobileShow="false" :appNameShow="false" titleColor="#BEBEBE" :titleLucency="0.4" position="fixed" title="自定义标题文字" :titleSize="12" :rotate="-25"></h-watermark>
		<!-- 群公告 -->
		<view class="notice-frame flexalign" style="position: fixed; z-index: 100;">
			<image src="/static/message/6f9be46cda6a5fbaaecf8f3d3cc33f9.png" style="width: 31rpx;height: 31rpx;margin-left: 23rpx;"></image>
			<view class="text lineclamp1">群公告文字内容文字内容文字内容群公告文字内容文字内容文字内容群公告文字内容文字内容文字内容群公告文字内容文字内容文字内容</view>
		</view>
		<scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: clientHeight + 'px'}" 
		:scroll-with-animation="scrollAnimation" :scroll-top="scrollTop" @scroll="scrollTouch" @scrolltolower="scrolltolowerTouch">
		<view style="height: 80rpx;"></view>
		<!-- 消息提示 -->
		<view class="flexcumal frame-tips">
			<view class="tips-time">昨天14:00</view>
			<text class="tips-title">欢迎加入群组</text>
			<text class="tips-time" style="margin-top: 21rpx;margin-bottom: 4rpx;">你可以尝试以下操作，快速开始协作</text>
			<view class="tips-button flexcen">完善群消息</view>
			<view class="tips-button flexcen">完善群公告</view>
			<!-- 创建通知 -->
		  <view class="tips-name flexal">
			张三
			<span style="font-weight: 400;font-size: 14px;color: #858585;margin-left: 9px;">创建了群组</span>
		  </view>
		</view>
		
		<!-- 消息内容 -->
		<view class="chat-frame" v-for="(message,index) in messages" :key="index">
			<!-- 消息时间 -->
			<view class="chat-time flexcen" v-if="message.type=='time'">{{message.content}}</view>
			 <!-- 邀请通知 -->
			 <view class="tips-name" style="display: flex;justify-content: center;margin-top: 20px;padding:0rpx 32rpx;" v-if="index == 0">
				<text>张三</text>
				<span style="font-weight: 400;font-size: 24rpx;color: #858585;margin-left: 24rpx;text-align: center;">邀请李四、XXX、XXX 加入此群，新成员入群可查看所有] 历史消息</span>
			  </view>
			  <view :class="message.sender==='me'?'chat-message-me':'chat-message-other'" :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}">
				  <!--            消息头像-->
				  <view :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
					<image :src="avatar" @click="add" class="examineeFace_logo_style" />
				  </view>
				  <!--          消息-->
				  <view :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
					<!--            消息上面-->
					<view :class="message.sender==='me'?'message-me-asWhole-top':'message-other-asWhole-top'">
					  <view>姓名</view>
					</view>
					<!--   消息内容-->
					<view :class="message.sender==='me'?'':'flexal'">
						<!-- 文本消息 -->
					<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'text' ">
					  {{ message.content }}
					</view>
					<!-- 图片消息 -->
					<u-image width="300rpx" :src="message.content" @click="previewImages(index,message)" v-if="message.type == 'image' " mode="widthFix" :border-radius="8"></u-image>
					 <!-- 视频消息 -->
					<view v-if="message.type == 'video' " class="flexcenter" @click="previewImages(index,message)">
					<video :show-center-play-btn="false" :controls="false" :src="message.content" class="meesage-img" ></video>
					<image src="/static/message/payIcon.png" style="width: 60rpx;height: 60rpx;position: absolute;"></image>
					</view>
					<!-- 文件消息 -->
					<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'file' ">
						<view  :style="{'display': 'flex','justify-content': 'space-between','flex-direction': message.sender==='me'? 'row':'row-reverse'}">
						<view :style="{'margin-left':message.sender==='me'? '0px': '10px','margin-right':message.sender==='me'? '10px': '0px'}">
							<view class="meesage-file-text" style="width: 288rpx;">{{message.content}}</view>
							<view class="meesage-file-text1">{{message.size}}</view>
						</view>
						<view>
							<image :src="fileIcon(message.suffix)"  style="width: 85rpx;height: 85rpx;"> </image>
						</view>
						</view>
					</view>
					<!-- 语音消息 -->
					<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'voice' " :style="{width:handleVoiceWidth(message.content)}" @click="payVoice(message)">
						<view  :style="{'display': 'flex','justify-content': 'flex-end','flex-direction': message.sender==='me'? 'row':'row-reverse'}">
						<view :style="{'margin-left':message.sender==='me'? '0px': '10px','margin-right':message.sender==='me'? '10px': '0px'}">
							<view class="meesage-file-text" style="text-align: right;">{{message.content + '"'}}</view>
						</view>
						<view>
							<image src="/static/message/c9589e18d7a2eb235d62e7453961cf2.png"  style="width: 22rpx;height: 29rpx;"> </image>
						</view>
						</view>
					</view>
					<!-- 签收消息 -->
					<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'sign' " style="width: 400rpx;" @click="go('/pages3/set/sign')">
					  <view class="sign-text">{{ message.content }}</view>
					  <view style="width: 100%;height: 0px;border: 1px solid #002565;opacity: 0.26;margin-top: 10px;"></view>
					  <view style="width: 100%;" class="flexcen">
						<view class="message-signButton flexcen" :class="message.receive? 'message-signButton-receive':''">{{message.receive? '  已签收':'未签收'}}</view>
					  </view>
					</view>
					
					 <!-- 视频通话 -->
					<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'videoCall' ">
						<view  :style="{'flex-direction': message.sender==='me'? 'row':'row-reverse'}" class="flexal">
							<view class="meesage-file-text" :style="{'margin-left':message.sender==='me'? '0px':'19rpx',
							'margin-right':message.sender==='me'? '19rpx':'0px'}">{{message.content}}</view>
							<image src="/static/message/videoCall.png"  style="width: 38rpx;height: 25rpx;" />
						</view>
					</view>
					
					 <!-- 语音通话 -->
					<view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'audioCall' ">
						<view  :style="{'flex-direction': message.sender==='me'? 'row':'row-reverse'}" class="flexal">
							<view class="meesage-file-text" :style="{'margin-left':message.sender==='me'? '0px':'19rpx',
							'margin-right':message.sender==='me'? '19rpx':'0px'}">{{message.content}}</view>
							<img src="/static/message/audioCall.png"  style="width: 41rpx;height: 32rpx;" />
						</view>
					</view>
					
					 <!-- 视频会议消息 -->
					 <view :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'meeting' " style="width: 250px;">
					  <view class="flexal" style="margin-bottom: 28rpx;margin-top: 15rpx;">
						<image src="/static/message/video.png"  style="width: 41rpx;height: 32rpx;margin-right: 18rpx;" />
						<view class="meesage-file-text" style="width: 100%;font-size: 32rpx;">{{ message.content }}</view>
					  </view>
					  <view class="flexal" style="margin-bottom: 27rpx;">
						<image src="/static/message/meetingID.png"  style="width: 34rpx;height: 33rpx;margin-right: 23rpx;" />
						<view class="meesage-file-text" style="width: 100%;">{{ message.content }}</view>
					  </view>
					  <view class="flexal" style="margin-bottom: 27rpx;">
						<image src="/static/message/meetingPeople.png"  style="width: 35rpx;height: 31rpx;margin-right: 24rpx;" />
						<view style="overflow: hidden;width: 80%;white-space: nowrap;">
						<image :src="img"  style="width: 36rpx;height: 36rpx;margin-right: 12rpx;border-radius: 50%;" v-for="(img,key) in message.peopleList" :key="key" />
						</view>
					  </view>
					  <view class="meetingButton flexcen" :class="message.finish? 'meetingButton-end':''">{{message.finish? '已结束':'正在进行中'}}</view>
					</view>
					
					 <!-- 是否已读 -->
					<view style="flex-direction: column-reverse;height: 100%;display: flex;margin-left: 18rpx;" v-if="message.sender!='me'" class="message-read" :class="message.read == 1? '':'message-read-active'">{{message.read ==1? '已读':'未读'}}</view>
					<view v-else class="message-read" style="margin-top: 16rpx;" :class="message.read == 1? '':'message-read-active'">{{message.read ==1? '已读':'未读'}}</view>
					</view>
				  </view>
				</view>
		</view>
		</scroll-view>
		<!-- 占位符 -->
		<view style="height: 98rpx;"></view>
		<!-- 底部悬浮输入框 -->
		<view class="bottom-frame">
			<view style="display: flex;align-items: flex-end;">
			<u-input v-model="value" :custom-style="{'padding-left': '20rpx','max-height':'200rpx','overflow': 'auto'}" class="bottom-input" :type="inputParams.type" placeholder="输入消息" 
			:border="inputParams.border" :clearable="inputParams.clearable" :height="inputParams.height" :auto-height="inputParams.autoHeight"
			
			 />
			<button v-if="false" type="default"  style="width: 700rpx;" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">按住 说话</button>
			
			<view class="flexalign" style="margin-bottom: 30rpx;">
			<image src="/static/message/audio.png" style="width: 39rpx;height: 46rpx;margin-left: 36rpx;" @click="show = !show" ></image>
			<image src="/static/message/add.png" style="width: 46rpx;height: 45rpx;margin-left: 44rpx;margin-right: 32rpx;" @click="optShow = !optShow"></image>
			</view>
			</view>
			<view style="margin-left: 32rpx;" v-if="optShow">
			<u-line color="#707070" length="686rpx" />
			</view>
			<view style="display: flex;flex-wrap: wrap;margin-left: 5rpx;margin-bottom: 53rpx;" v-if="optShow">
				<view class="flexcumal" style="margin-left: 68rpx;margin-top: 32rpx;margin-bottom: 9rpx;" v-for="(item,index) in optList" :key="index" @click="openOptItem(item,index)">
					<image :src="item.icon" style="width: 100rpx;height: 100rpx;"></image>
					<text style="font-weight: 400;font-size: 24rpx;color: #858585;margin-top: 10rpx;">{{item.text}}</text>
				</view>
			</view>
		</view>
		
		<!-- 拨打语音/视频 -->
		<u-mask :show="show" @click="show = false">
			
				<view class="warp">
					<view>
					<view class="frame-video flexcumal">
						<view class="text flexcenter">语音通话</view>
						<u-line color="#707070" length="622rpx" style="opacity: 0.17;" />
						<view class="text flexcenter">视频通话</view>
					</view>
					<view class="frame-video-cancel flexcenter">
						取消
					</view>
					</view>
			</view>
		</u-mask>
		
		<!-- 语音遮罩层 -->
		<view class="voice-mask" v-show="mask">
			<!--语音条 -->
			<view class="voice-bar voice-del" :class="{voiceDel:needCancel}" :style="{width:getVoiceBarWidth}">
				<image src="/static/message/am2p8-1km59.gif" class="voice-volume" :class="{volumeDel:needCancel}"></image>
				<view class="trangle-bottom" :class="{trangleDel:needCancel}"></view>
			</view>
			<!-- 底部区域 -->
			<view class="voice-send">
				<!-- 取消和转文字图标 -->
				<view class="voice-middle-wrapper">
					<!-- 取消 -->
					<view class="voice-left-wrapper">
						<view class="cancel-del" :class="{delTip:needCancel}">松开 取消</view>
						<view class="voice-middle-inner close" :class="{bigger:needCancel}">
							<image src="/static/message/9cdc94622f73fd761f4301d82af7d6f.png" class="close-icon"></image>
						</view>
					</view>
					<!-- 转文字 -->
					<view class="voice-middle-inner to-text">
						<text class="wen">文</text>
						<!-- <image src="" class="wen"></image> -->
					</view>
					<view class="send-tip" :class="{sendTipNone:needCancel}">松开 发送</view>
				</view>	
				<!-- 底部语音按钮 -->
				<view class="mask-bottom">
					<image src="/static/message/af8cef3a76cd791695f0c5960b34b6d.png"></image>
				</view>
			</view>	
		</view>
		
		<createSignPopVue :signPop="signPop" @createSignCloseSubmit="createSignCloseSubmit" @openPeopleSubimt="openPeopleSubimt"
		:list="signList"
		></createSignPopVue>
		<peopleAddPopVue :openPop="openPop" :type="popType"  :list="list" @peopleAddCloseSubmit="peopleAddCloseSubmit"></peopleAddPopVue>
		
		<!-- 电话提示滑动快 -->
		<movablearea1 :movaheight="movaheightAll" v-if="movableareaShow" @editMovaheightAll="editMovaheightAll" :movaTop="movaTopAll"></movablearea1>
	</view>
</template>

<script>
	import peopleAddPopVue from '../../components/peopleAddPop/peopleAddPop.vue';
	import createSignPopVue from '../../components/createSignPop/createSignPop.vue';
	const innerAudioContext = uni.createInnerAudioContext();
	const recorderManager = uni.getRecorderManager();
	export default {
		data() {
			return {
			avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
			openPop:false,					//接收人弹窗
			popType:3,						//类型接收人
			signPop:false,					//签收消息弹窗
			inputParams:{
				// value: '',
				type: 'textarea',
				border: false,
				height: 50,
				clearable:false,
				autoHeight: true,
			},
			 messages: [
				 {sender: 'other', content: '文字',type:'sign',read:1,receive:0},
				 {sender: 'me', content: '文字',type:'sign',read:1,receive:1},
				 {sender: 'me', content: '通话时长 0:07',type:'videoCall',read:1,receive:1},
				 {sender: 'other', content: '对方已拒绝',type:'videoCall',read:1,receive:1},
				 {sender: 'other', content: '已取消',type:'videoCall',read:1,receive:1},
				 {sender: 'me', content: '你好！',type:'text',read:0},
				 {sender: 'other', content: '你好啊！',type:'text',read:0},
				 {sender: 'other', content: '请问有什么我可以帮助你的吗？',type:'text',read:0},
				 {sender: 'me', content: '我正在寻找一家好的餐厅。',type:'text',read:1},
				 {sender: 'other', content: '你在哪个城市？',type:'text',read:1},
				 {sender: 'me', content: '我在北京。',type:'text',read:1},
				 {sender: 'me', content: '13:52',type:'time',read:1},
				 {sender: 'other', content: '好的，我可以为您推荐一些北京的餐厅。您需要什么类型的餐厅？',type:'text',read:1},
				 {sender: 'me', content: '我想要吃火锅。',type:'text',read:1},
				 {sender: 'other', content: '好的，以下是我为您推荐的北京火锅餐厅列表：[餐厅1，餐厅2，餐厅3]。您需要我帮您预约吗？',type:'text',read:1},
				 {sender: 'me', content: 'https://cdn.uviewui.com/uview/album/1.jpg',type:'image',read:1},
				 {sender: 'other', content: 'https://www.zhongjiangwenhua.com/Upload/2024/0609/202406091540414772.jpg',type:'image',read:1},
				 {sender: 'me', content: 'https://luosai.oss-cn-shenzhen.aliyuncs.com/Upload/Video/2024/0730/202407301050064716.mp4',type:'video',read:1},
				 {sender: 'me', content: '不需要，我会自己预约。谢谢您的帮助！',type:'text',read:1},
				 {sender: 'other', content: '不客气，祝您用餐愉快！',type:'text',read:1},
				 {sender: 'other', content: '通话时长 0:07',type:'audioCall',read:1,receive:1},
				 {sender: 'me', content: '对方已拒绝',type:'audioCall',read:1,receive:1},
				 {sender: 'me', content: '已取消',type:'audioCall',read:1,receive:1},
				 {sender: 'me', content: '再见！',type:'text',read:1},
				 {sender: 'other', content: '再见！',type:'text',read:1},
				 {sender: 'other', content: '标题内容文字文字文文字标题内容文字文字文文字.pdf',type:'file',read:1,suffix:'pdf',size:'100KB'},
				 {sender: 'me', content: '标题内容文字文字文文.xlx',type:'file',read:1,suffix:'xlx',size:'100KB'},
				 {sender: 'other', content: '视频会议名称',type:'meeting',read:1,meetingId:'会议ID:1234567',
				 peopleList:['https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				 ],
				 finish:0,
				 },
				 {sender: 'me', content: '视频会议名称',type:'meeting',read:0,meetingId:'会议ID:1234567',
				 peopleList:['https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				   'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
				 ],
				 finish:1,
				 },
				 {sender: 'me', content: '60',type:'voice',read:1,voiceUrl:"http://store/emgrbiz7rpvBb92e282af58322b48dc5ff136cc5c03a.durationTime=1837.aac"},
				 ],
				 value:'',
				 optList:[
					 {
						 icon:'/static/message/8c0710f3e03a25984fe24129198769f.png',
						 text:'照片'
					 },{
						 icon:'/static/message/f328aa1999e9b8de4adbb85a2cbc880.png',
						 text:'拍摄'
					 },{
						 icon:'/static/message/cb5264d17b063d1536e0d9c5213b115.png',
						 text:'视频通话'
					 },{
						 icon:'/static/message/aa8c2b4b78e63842d8426de319c39c5.png',
						 text:'位置'
					 },{
						 icon:'/static/message/585228eda04a0f7b3229e7c6a3173c9.png',
						 text:'文件'
					 },{
						 icon:'/static/message/975e4d4198594f6b8d293faacc8f7cc.png',
						 text:'云文档'
					 },{
						 icon:'/static/message/d34cdd14eb2ea758f1f73933ed88a3d.png',
						 text:'签收消息'
					 },
				 ],
				 optShow:false,
				 show:false,
				 style: {
					 pageHeight: 0,
					 contentViewHeight: 0,
					 footViewHeight: 90,
					 mitemHeight: 0
				 },
				 scrollTop:0,
				 isScrollTop:true,					//是否要自动到底
				 scrollAnimation:false,				//滑动动画是否开启
				 // 群 成员
				  list:[
				 	{
				 		name:'王小二',
				 		avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
				 		content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'王小明',
				 		avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'李二',
				 		avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'张三',
				 		avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'老四',
				 		avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'王五',
				 		avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'老六',
				 		avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'老王',
				 		avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'老李',
				 		avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 ],
				 signList:[
				 	{
				 		name:'王小二',
				 		avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
				 		content:'文字内容内容内容文字内容内容内容文字内容内容内容文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 	{
				 		name:'王小明',
				 		avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
				 		content:'文字内容内容内容',
				 		time:'14:00',
				 		checked:false
				 	},
				 ],
				 
				 // 发送语音消息参数
				 length:0,
				 startX:0,
				 startY:0,
				 mask:false,
				 timer:null,
				 needCancel:false,
				 voiceLength:0,			//语言长度
				 isPlay:false,			//播放/暂停
			}
		},
		watch:{
			scrollTop(newValue,oldValue){
				console.log(newValue,oldValue)
			}
		},
		components:{
			peopleAddPopVue,						//选择接收人
			createSignPopVue,							//签收消息
		},
		computed:{
		  // 计算语音条宽度
		  	getVoiceBarWidth(){
		  		// return (230 + this.length * 4) + 'rpx';
				return 230+'rpx'
		  	}
		},
		onReady() {
			 const res = uni.getSystemInfoSync();   //获取手机可使用窗口高度     api为获取系统信息同步接口
		　　　this.style.pageHeight = res.windowHeight;
		　　　this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70; //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
		　　　this.$nextTick(()=>{
			 this.scrollToBottom();   //创建后调用回到底部方法
			 })
			
		},
		methods: {
			// 图片点击预览轮播
			previewImages(index,item){
				// 当为音频形式的时，点击进行音频播放，不处理
				// if (this.list[index].type !== "mp4") {
					// this.previeShow = false;
					let list = []
					console.log('item',item)
					if(item.type == 'video'){
						list.push({url:item.content,type:'video'})
					}else{
						list.push({url:item.content,type:'jpg'})
					}
					index = 0
					var stateObj = {};
					let that = this;
					let onjs = JSON.stringify(list)
					uni.navigateTo({
						url: '/pages2/pages/kxj-previewImage/kxj-previewImage?onjs='+onjs+'&index='+index+'&id='+1,
						events: {
							// 监听子组件传过来的值，这儿为了实现联动效果，
							// 即：预览翻到某一图片/视频，轮播图同样滚动到相关的地方
							changePreviewIndex(index){
								that.$refs.myswiper.index = index;
							},
						}
					});
				// }
			},
			// 文件消息图标
			fileIcon(suffix){
				let fileIcon = []
				fileIcon['ppt'] = '/static/message/ppt.png'
				fileIcon['pdf'] = '/static/message/pdf.png'
				fileIcon['word'] = '/static/message/word.png'
				fileIcon['xlx'] = '/static/message/xlx.png'
				fileIcon['package'] = '/static/message/package.png'
				console.log('fileIcon',fileIcon)
				
				return fileIcon[suffix]
			},
			// 添加记录
			add(){
				this.messages.push( {sender: 'me', content: '你好！',type:'text',read:0},)
				if(this.isScrollTop){
					this.scrollToBottom()
				}
			},
			// 滑动聊天记录
			scrollTouch(e){
				// console.log('滑动',e)
				if(e.detail.deltaY > 0){
					console.log('当前是下拉，查看顶部消息')
					this.isScrollTop = false
				}else{
					console.log('当前是上滑')
				}
			},
			// 滑动到底
			scrolltolowerTouch(e){
				console.log('滑动到底了',e)
				this.isScrollTop = true
				this.scrollAnimation = true
			},
	　　　	/**
			 * @author gongliying
			 * @date 2019-07-26
			 * @information 跳转页面底部
			 */
			scrollToBottom () {
				let that = this;
				console.log('调用')
				let query = uni.createSelectorQuery();
				// query.selectAll('.frame-tips').boundingClientRect();
				query.selectAll('.chat-frame').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
					console.log('res',res)
					that.style.mitemHeight = 0;
					res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40)   //获取所有内部子元素的高度
					if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) {   //判断子元素高度是否大于显示高度
						that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight     //用子元素的高度减去显示的高度就获益获得序言滚动的高度
					}
					console.log('scrollTop',that.scrollTop)
	　　　　　　　})
			},
			// 接收人弹窗回调
			peopleAddCloseSubmit(params){
				console.log('触发了',params)
				// this.name = this.list[params.radioIndex].name
				// this.radioIndex = params.radioIndex
				this.openPop = false
			},
			// 触发操作栏内容
			openOptItem(item,index){
				console.log('index',index)
				if(index == 6){
					this.signPop = true
				}
			},
			// 关闭签收消息回调
			createSignCloseSubmit(){
				this.signPop = false
			},
			// 打开接收人回调
			openPeopleSubimt(){
				this.openPop = true
			},
			
			//发送语音消息
			// 开始录制语音
			handleTouchStart(e){
				this.mask = true;
				recorderManager.start();
				this.length = 1;
				this.startX = e.touches[0].pageX;
				this.startY = e.touches[0].pageY;
				this.timer = setInterval(() => {
					this.length += 1;
					if(this.length >= 60) {
						clearInterval(this.timer);
						this.handleTouchEnd()
					}
				},1000);
			},
			
			// 语音录制时滑动事件
			handleTouchMove(e){
				if(this.startX - e.touches[0].pageX > 14 && this.startY - e.touches[0].pageY > 50){
					this.needCancel = true;
				} else {
					this.needCancel = false;
				}
			},
			
			// 语音录制结束
			handleTouchEnd(){
				this.mask = false;
				console.log('录音结束')
				clearInterval(this.timer);
				recorderManager.stop();
				recorderManager.onStop((res) => {
					console.log('res',res)
					const message = {
						voice:res.tempFilePath,
						length:this.length
					};
					 let voiceLength = Math.round(res.duration) / 1000
					 voiceLength = voiceLength.toFixed(0)
					console.log('voiceLength',voiceLength)
					// this.messages.push( {sender: 'me', content: voiceLength,type:'voice',read:0,voiceUrl:res.tempFilePath})
				uni.saveFile({
					tempFilePath: res.tempFilePath ,
					success:  async (ans)=> {
						let savedurl = ans.savedFilePath;// 移动后需要记录下存放在哪个目录下
						console.log("文件持久化成功----------------",savedurl)
						this.messages.push( {sender: 'me', content: voiceLength,type:'voice',read:0,voiceUrl:savedurl})
						// await  uploadyy(savedurl)  ; // 调用上传音频的函数 
					}
				  });
				// uni.getFileSystemManager().saveFile({
				// 	tempFilePath: res.tempFilePath ,
				// 	filePath:`${uni.env.USER_DATA_PATH}/` + new Date().getTime() + '.mp3' ,
				// 	success(res){
				// 		console.log('保存成功',res)
				// 		this.messages.push( {sender: 'me', content: voiceLength,type:'voice',read:0,voiceUrl:res.savedFilePath})
				// 	},
				// 	fail(res){
				// 		console.log('保存失败',res)
				// 	}
				// })
				// uni.getFileInfo({
				// 	filePath:res.tempFilePath,
				// 	success(res) {
				// 		console.log('res',res)
				// 	}
				// })
				  
					console.log('message',message)
					// if(!this.needCancel){
					// 	this.inputSubmit(message,2);
					// }
					this.needCancel = false
				});
			},
			// 处理语音长度
			handleVoiceWidth(lenght){
				lenght = lenght - 1;
				let Lmin = 138;
				let Lmax = 366
				let barCanChangeLen = Lmax - Lmin;
				
				// 11秒以内的语音
				if (lenght < 11) {
					// VoicePlayTimes 为10秒时，正好为可变长度的一半
					return (Lmin + lenght * 0.05 * barCanChangeLen) + 'rpx'; 
				} else {
					// 12-60秒的语音
					return (Lmin + 0.5 * barCanChangeLen + (lenght - 10) * 0.01 * barCanChangeLen) + 'rpx';
				}			
			},
			// 播放语音
			payVoice(item){
				// item.isFirstPlay = false;
				console.log('我被点击了',item)

				innerAudioContext.src = item.voiceUrl;
				this.isPlay = !this.isPlay;
				this.isPlay ? innerAudioContext.play() : innerAudioContext.stop();
				// innerAudioContext.play()
				console.log('innerAudioContext',innerAudioContext,this.isPlay)
				innerAudioContext.onEnded(() => {
					this.isPlay = false;
				})
				 innerAudioContext.onPlay(() => {
				    console.log('音频播放开始');
				  });
				innerAudioContext.onStop(() => {
					this.isPlay = false;
				})
			},
		}
	}
</script>

<style lang="less">
	page>view{
		
	}
	.message-view{
		background: #F3F4F6 !important;
	}
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			/* flex: 1; */
			/* 如果您想让slot内容与导航栏左右有空隙 */
			/* padding: 0 30rpx; */
			.right{
				width: 18rpx;
				height: 34rpx;
				transform: rotate(180deg); 
				margin-left: 34rpx;
			}
			.top-title{
				flex: 1;
				display: flex;
				flex-direction: column;
				width: 530rpx;
				font-weight: normal;
				font-size: 36rpx;
				color: #000000;
				text-align: center;
			}
		}
		
		.notice-frame{
			width: 686rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			margin-left: 32rpx;
			margin-top: 10rpx;
			
			.text{
				width: 600rpx;
				font-weight: normal;
				font-size: 30rpx;
				color: #070707;
				margin-left: 15rpx;
			}
		}
		.frame-tips{
			width: 100%;
			.tips-time{
				margin-top: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #858585;
			}
			.tips-title{
				margin-top: 36rpx;
				font-weight: normal;
				font-size: 36rpx;
				color: #000000;
			}
			.tips-button{
				margin-top: 32rpx;
				width: 230rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #929292;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			.tips-name{
				margin-top: 63rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #0052D9;
				// width: 100%;
			  }
		}
		
		.chat-frame{
			
		 .chat-time{
			  width: 100%;
			margin-top: 36rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #858585;
			}
			.tips-name{
				margin-top: 63rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #0052D9;
				// width: 100%;
			  }
			  .chat-message-other {
			    /*background-color: red;*/
			    display: flex;
			    padding-left: 1rem;
			    padding-top: 1rem;
			  }
			  
			  .chat-message-me {
			    /*background-color: red;*/
			    display: flex;
			    padding-right: 32rpx;
			    padding-top: 1rem;
			    flex-direction: row-reverse; /* 将子view的顺序反转 */
			  
			  }
			  
			  .message-me-asWhole-headPortrait {
			    padding: 6rpx;
			  }
			  
			  .message-other-asWhole-headPortrait {
			    padding: 6rpx;
			  }
			  
			  .message-me-asWhole-right {
			    display: flex;
			    flex-direction: column; /* 设置子元素垂直排列 */
			    margin-left: 0.1rem;
			  }
			  
			  .message-other-asWhole-right {
			    display: flex;
			    flex-direction: column; /* 设置子元素垂直排列 */
			    margin-left: 0.1rem;
			  }
			  
			  .message-me-asWhole-top {
			    padding: 6rpx;
			    /* font-size: 12px; */
			    // font-family: 微软雅黑;
			    padding: 6rpx;
			    // color: rgba(134, 144, 156, 1);
			    // direction: rtl; /* 右到左书写 */
			    text-align: right;
			    font-weight: 400;
			    font-size: 26rpx;
			    color: #6E6E6E;
			    // display: flex;
			    // justify-content: flex-end;
			  }
			  
			  .message-other-asWhole-top {
			    padding: 6rpx;
			    /* font-size: 12px; */
			    // font-family: 微软雅黑;
			   font-weight: 400;
			   font-size: 26rpx;
			   color: #6E6E6E;
			    padding: 6rpx;
			    // color: rgba(134, 144, 156, 1);
			  }
			  
			  .message-me {
			    // background-color: rgba(242, 243, 245, 1);
				background: #D2E3FF;
			    max-width: 467rpx;
			    word-wrap: break-word; /* 处理英文单词换行 */
			    word-break: break-all; /* 处理中文换行 */
			    display: inline-block; /*将view元素转换为行内块元素*/
			    width: auto; /* 宽度根据文本宽度自动调正*/
				font-weight: 400;
			    padding: 12rpx 24rpx;
			    border-radius: 8rpx;
			    font-size: 32rpx;
			    color: #333333;
			  }
			  
			  .message-other {
			    // background-color: rgba(242, 243, 245, 1);
				background: #FFFFFF;
			    max-width: 467rpx;
			    word-wrap: break-word; /* 处理英文单词换行 */
			    word-break: break-all; /* 处理中文换行 */
			    display: inline-block; /*将view元素转换为行内块元素*/
			    width: auto; /* 宽度根据文本宽度自动调正*/
				font-weight: 400;
			    padding: 12rpx 24rpx;
			    border-radius: 8rpx;
			    font-size: 32rpx;
			    color: #333333;
			  }
			   .examineeFace_logo_style {
			      width: 100rpx;
			      height: 100rpx;
			      border-radius: 50%;
			    }
			.message-read{
					font-weight: 400;
					font-size: 26rpx;
					color: #6E6E6E;
			  }
			  .message-read-active{
				color: #36A8F4;
			  }
			  .meesage-file-text{
				 font-weight: 400;
				 color: #333333;
				 font-size: 32rpx;
				 // width: 288rpx;
				 display: -webkit-box;          /* 需要使用 -webkit- 前缀 */
				 -webkit-box-orient: vertical;  /* 垂直布局 */
				 overflow: hidden;              /* 隐藏超出的内容 */
				 text-overflow: ellipsis;       /* 省略号 */
				 -webkit-line-clamp: 2;         /* 显示的行数 */
			 }
			 .meesage-file-text1{
				 margin-top: 5px;
				 font-weight: 400;
				 font-size: 26rpx;
				 font-weight: 400;
				 color: #6E6E6E;
			 }
			 .message-signButton{
				 margin-top: 24rpx;
				 width: 231rpx;
				 height: 52rpx;
				 border-radius: 8rpx;
				 border: 2rpx solid #FF3400;
				 color: #FF3400;
				 font-weight: 400;
				 font-size: 26rpx;
			   }
		 
			   .message-signButton-receive{
				 border: 2rpx solid #858A99;
				 color: #858A99;
			   }
			   .sign-text{
				   font-weight: 400;
				   font-size: 32rpx;
				   color: #333333;
			   }
			   .meetingButton{
				   margin-top: 47rpx;
				   margin-bottom: 17rpx;
				   width: 100%;
				   height: 68rpx;
				   font-size: 28rpx;
				   color: #0052D9;
				   font-weight: 400;
				   border-radius: 16rpx;
				   border: 1rpx solid #0052D9;
				 }
				 .meetingButton-end{
				   border: 1rpx solid #858A99;
				   color: #858A99;
				 }
		}
		
		.bottom-frame{
			position: fixed;
			bottom: 0rpx;
			width: 750rpx;
			// height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(9,4,114,0.1);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			z-index: 100;
			.bottom-input{
				margin-top: 15rpx;
				margin-left: 32rpx;
				width: 521rpx;
				background: #F6F6F6;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 20rpx;
			}
		}
		
		.icon{
			width: 40rpx;
			height: 40rpx;
		}
		.warp {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			height: 100%;
			.frame-video{
				  width: 686rpx;
				  height: 188rpx;
				  background: #FFFFFF;
				  border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
			.text{
				width: 100%;
				height: 94rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}
			.frame-video-cancel{
				margin-top: 22rpx;
				margin-bottom: 60rpx;
				width: 686rpx;
				height: 94rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
			}
		}
	  
	.meesage-img {
		  max-width: 295rpx;
		  max-height: 396rpx;
		  // width: 100%;
		  // height: 100%;
		  border-radius: 4px;
	}
	.chat-window{
		// background: #000;
	}
	
	
	.voice-mask{
			position:fixed;
			top:0;
			right:0;
			bottom:0;
			left:0;
			/* display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center; */
			background-color: rgba(0,0,0,0.8);
			z-index: 101;
		
		.voice-bar{
			position: absolute;
			left:50%;
			top: 50%;
			transform: translate(-50%,-30%);
			/* width: 230rpx; */
			height:150rpx;
			background-color:#51ff50;
			border-radius: 26rpx;
			margin-bottom: 220rpx;
		}
		.voiceDel{
			left:80rpx;
			top: 50%;
			width: 170rpx !important;
			transform: translateX(0%);
			transform: translateY(-30%);
			background-color: red;
		}
		.voice-volume{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 200rpx;
			height: 36rpx;
		}
		.volumeDel{
			width: 80rpx;
		}
		.trangle-bottom{
			position: absolute;
			bottom: -38rpx;
			left:50%;
			transform: translateX(-50%);
			border-width: 20rpx;
			border-style: solid;
			border-color: #51FF50 transparent transparent transparent;
		}
		.trangleDel{
			border-color: red transparent transparent transparent;
		}
		.voice-send{
			position: absolute;
			bottom: 0;
			width: 100%;
		}
		.voice-middle-wrapper{
			width: 100%;
			display: flex;
			position:relative;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 40rpx;
		}
		.voice-left-wrapper{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-end;
		}
		.cancel-del{
			display:none;
		}
		.delTip{
			display:block;
			color:#bfbfbf;
			margin: 0 22rpx 18rpx 0;
		}
		.voice-middle-inner{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0,0,0,0.2);
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
		.close{
			transform: rotate(350deg);
			margin-left: 80rpx;
		}	
		.bigger{
			width: 170rpx;
			height: 170rpx;
		}
		.to-text{
			transform: rotate(10deg);
			margin-right: 80rpx;
		}
		.close-icon{
			width:38rpx;
			height: 38rpx;	
		}
		.wen{
			font-size: 40rpx;
			color:#bfbfbf;
		}
		.send-tip{
			position: absolute;
			left: 50%;
			bottom:0rpx;
			transform: translate(-50%,36%);
			color:#bfbfbf;
		}
		.sendTipNone{
			display: none;
		}
		.mask-bottom{
			position: relative;
			width: 100%;
			height:190rpx;
			border-top: #BABABB 8rpx solid;
			border-radius: 300rpx 300rpx 0 0;
			background-image: linear-gradient(#949794,#e1e3e1);
		}
		.mask-bottom image{
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			top: 0;
			right:0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
	}
	
</style>
